Developing Single Page Application In AngularJS.
2224
26-Jan-2016
I want to Use Single Page Application In AngularJS.How to do this Please Help me.
Updated on 27-Jan-2016
Anonymous User
27-Jan-2016For single page application we have ng-route and ng-view directive. Ng-route manage the routing of a web application and ng-view allows us to render different view depending on the router.
<div style="padding-left:130px;padding-right:200px;"> <h1> This is Forum Page</h1> <article> <h4><a href="#">What is Boxing and Unboxing type conversion?</a></h4> <div class="row"> <div class="col-sm-7 col-md-7 populartag" style="padding-left: 0;"> <span class="glyphicon glyphicon-folder-open" title="Category"></span> <a href=" " title="See all posts in C#">C#</a> <span class="glyphicon glyphicon-bookmark" title="Tag"></span> <a href="#" title="See all posts in C#">C#</a><span> </span> <a href="#" title="See all posts in .NET">.NET</a><span> </span> </div> </div> <div class="row"> <div class="col-sm-7 col-md-7 postedbox" style="padding-left: 0; margin-top: 7.5px;"> By <span class="text-primary"><a href="#">Manoj Bhatt</a></span> posted <span class="glyphicon glyphicon-time"></span> <span title="1/26/2016 10:29:21 PM"> 43 minutes ago</span> </div> <div class="col-sm-5 col-md-5 text-right viewsbox"> <span class="glyphicon glyphicon-pencil"></span> <a href="#"> 0 Reply(s) </a> <br> <span class="glyphicon glyphicon-eye-open"></span> <a href="#"> 5 View(s) </a> </div> </div> </article> </div>Article.Html <div style="padding-left:130px;padding-right:200px;"> <h1> This is - ARTICLE Page</h1> <article> <h4><a href="#">What is Boxing and Unboxing type conversion?</a></h4> <div class="row"> <div class="col-sm-7 col-md-7 populartag" style="padding-left: 0;"> <span class="glyphicon glyphicon-folder-open" title="Category"></span> <a href=" " title="See all posts in C#">C#</a> <span class="glyphicon glyphicon-bookmark" title="Tag"></span> <a href="#" title="See all posts in C#">C#</a><span> </span> <a href="#" title="See all posts in .NET">.NET</a><span> </span> </div> </div> <div class="row"> <div class="col-sm-7 col-md-7 postedbox" style="padding-left: 0; margin-top: 7.5px;"> By <span class="text-primary"><a href="#">Manoj Bhatt</a></span> posted <span class="glyphicon glyphicon-time"></span> <span title="1/26/2016 10:29:21 PM"> 43 minutes ago</span> </div> <div class="col-sm-5 col-md-5 text-right viewsbox"> <span class="glyphicon glyphicon-pencil"></span> <a href="#"> 0 Reply(s) </a> <br> <span class="glyphicon glyphicon-eye-open"></span> <a href="#"> 5 View(s) </a> </div> </div> </article> </div>Blog.html <div style="padding-left:130px;padding-right:200px;"> <h1> This is Blog Page</h1> <article> <h4><a href="#">What is Boxing and Unboxing type conversion?</a></h4> <div class="row"> <div class="col-sm-7 col-md-7 populartag" style="padding-left: 0;"> <span class="glyphicon glyphicon-folder-open" title="Category"></span> <a href=" " title="See all posts in C#">C#</a> <span class="glyphicon glyphicon-bookmark" title="Tag"></span> <a href="#" title="See all posts in C#">C#</a><span> </span> <a href="#" title="See all posts in .NET">.NET</a><span> </span> </div> </div> <div class="row"> <div class="col-sm-7 col-md-7 postedbox" style="padding-left: 0; margin-top: 7.5px;"> By <span class="text-primary"><a href="#">Manoj Bhatt</a></span> posted <span class="glyphicon glyphicon-time"></span> <span title="1/26/2016 10:29:21 PM"> 43 minutes ago</span> </div> <div class="col-sm-5 col-md-5 text-right viewsbox"> <span class="glyphicon glyphicon-pencil"></span> <a href="#"> 0 Reply(s) </a> <br> <span class="glyphicon glyphicon-eye-open"></span> <a href="#"> 5 View(s) </a> </div> </div> </article> </div>Interview.html <div style="padding-left: 130px; padding-right: 200px;"> <h1>This is Interview Page</h1> <article> <h4><a href="#">What is Boxing and Unboxing type conversion?</a></h4> <div class="row"> <div class="col-sm-7 col-md-7 populartag" style="padding-left: 0;"> <span class="glyphicon glyphicon-folder-open" title="Category"></span> <a href=" " title="See all posts in C#">C#</a> <span class="glyphicon glyphicon-bookmark" title="Tag"></span> <a href="#" title="See all posts in C#">C#</a><span> </span> <a href="#" title="See all posts in .NET">.NET</a><span> </span> </div> </div> <div class="row"> <div class="col-sm-7 col-md-7 postedbox" style="padding-left: 0; margin-top: 7.5px;"> By <span class="text-primary"><a href="#">Manoj Bhatt</a></span> posted <span class="glyphicon glyphicon-time"></span> <span title="1/26/2016 10:29:21 PM"> 43 minutes ago</span> </div> <div class="col-sm-5 col-md-5 text-right viewsbox"> <span class="glyphicon glyphicon-pencil"></span> <a href="#"> 0 Reply(s) </a> <br> <span class="glyphicon glyphicon-eye-open"></span> <a href="#"> 5 View(s) </a> </div> </div> </article> </div>Home.cshtml
<div style="padding-left:130px;padding-right:200px;"> <h1> This is home page</h1> <p>Home</p> </div>Myscript.js var app = angular.module('single-page-app', ['ngRoute']); app.config(function ($routeProvider) { $routeProvider .when('/', { templateUrl: 'Home.html' }) .when('/Article', { templateUrl: 'Article.html' }) .when('/Blog', { templateUrl: 'Blog.html' }) .when('/Forum', { templateUrl: 'Forum.html' }) .when('/Interview', { templateUrl: 'Interview.html' }); }); app.controller('cfgController', function ($scope) { });